<template>
  <div class="chart-container">
    <div ref="chart" class="chart" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue"
import * as echarts from "echarts"

// 定义 chart 元素引用
const chart = ref<HTMLDivElement | null>(null)

// 初始化图表的函数
const initChart = () => {
  if (!chart.value) return

  // 实例化 ECharts
  const myChart = echarts.init(chart.value)
  // 总车数计算
  const totalCars = 12 + 8
  // 配置项
  const option: echarts.EChartsOption = {
    // title: {
    //   text: "吊车和工程车状态",
    //   subtext: "内环为总体数，外环为作业状态",
    //   left: "center"
    // },
    tooltip: {
      trigger: "item",
      formatter: (params) => {
        return `${params.name}<br/>${params.value} (${((params.value / totalCars) * 100).toFixed(2)}%)`
      },
      backgroundColor: "#333", // 设置背景颜色
      padding: [0, 15], // 设置内边距，控制长宽
      textStyle: {
        color: "#fff", // 设置文字颜色
        fontSize: 14 // 设置文字大小
      },
      position: "inside" // 使 tooltip 显示在图形内部
    },
    // legend: {
    //   orient: "vertical",
    //   left: "left"
    // },
    series: [
      // 内环（吊车和工程车总数）
      {
        name: "车辆总数",
        type: "pie",
        radius: ["65%", "80%"], // 内外径，环形
        color: ["#46CBF0", "#00D090"],
        label: {
          show: false // 隐藏内环的标签
        },
        labelLine: {
          show: false // 隐藏内环的标签连接线
        },
        data: [
          { value: 12, name: "吊车" },
          { value: 8, name: "工程车" }
        ]
      },
      // 外环（作业状态）
      {
        name: "作业状态",
        type: "pie",
        radius: ["85%", "100%"], // 外环半径
        color: ["#46CBF0", "rgba(0, 208, 144, 0.20)", "#00D090", "rgba(70, 203, 240, 0.20)"],
        labelLine: {
          show: false // 隐藏外环的标签连接线
        },
        label: {
          show: false // 隐藏外环的标签
        },
        data: [
          { value: 5, name: "吊车作业中" },
          { value: 7, name: "吊车空闲中" },
          { value: 4, name: "工程车作业中" },
          { value: 4, name: "工程车空闲中" }
        ]
      }
    ],
    // 使用 graphic 添加图表中心的自定义文本
    graphic: [
      {
        type: "text",
        left: "center",
        top: "25%", // 主标题的位置
        style: {
          text: `\n${totalCars}`, // 主标题为车辆总和
          textAlign: "center",
          fontSize: 18,
          fontWeight: "bold",
          fill: "#fff" // 文字颜色
        }
      },
      {
        type: "text",
        left: "center",
        top: "50%", // 副标题的位置
        style: {
          text: "总车辆数", // 副标题
          textAlign: "center",
          fontSize: 14,
          fill: "#fff" // 文字颜色
        }
      }
    ]
  }

  // 设置配置项
  myChart.setOption(option)

  // 监听窗口大小变化，图表自适应
  const resizeHandler = () => {
    myChart.resize()
  }
  window.addEventListener("resize", resizeHandler)

  // 在组件销毁前移除事件监听器
  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandler)
    myChart.dispose() // 销毁图表实例
  })
}

// 在组件挂载时初始化图表
onMounted(() => {
  initChart()
})
</script>

<style scoped>
.chart-container {
  width: 138px;
  height: 138px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
